/*
 * @Author: liangliang
 * @Date: 2023-05-18 15:40:29
 * @LastEditors: yusha
 * @LastEditTime: 2023-08-25 10:14:43
 * @Description: 线上bug登记
 */

import React, { useState, useEffect } from 'react';
import { useAntdTable } from 'ahooks';
import { Button, Form, Input, Row, Col, Card, Modal, Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useFormModal } from '@/hooks/useFormModal';
import { signup } from '@/config/request/customer';
import { orderProcess } from '@/config/request/testTools';

import './../module/index.scss';
type SizeType = Parameters<typeof Form>[0]['size'];
const CustomerApi: React.FC = () => {
    const formTailLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 14, offset: 4 },
    };
    const [form] = Form.useForm();
    const [checkNick, setCheckNick] = useState(false);

    useEffect(() => {
        form.validateFields(['nickname']);
    }, [checkNick, form]);

    const onCheckboxChange = (e: { target: { checked: boolean; }; }) => {
        setCheckNick(e.target.checked);
    };

    const onCheck = async () => {
        try {
            const values = await form.getFieldsValue();

            console.log('Success:', values);
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
        }
    };
    const list = [
        {
            key: '',
            title: '123',
            form: '',
            formList: [
                {
                    formName: '登陆名称：',
                    key: 'name',
                    template: 'input',
                },
                {
                    formName: '所属国家：',
                    key: 'country',
                    template: 'select',
                    options: [
                        { value: 'jack', label: 'Jack' },
                        { value: 'lucy', label: 'Lucy' },
                        { value: 'Yiminghe', label: 'yiminghe' },
                        { value: 'disabled', label: 'Disabled', disabled: true },
                    ],
                    handleChange(value) {
                        console.log(value);
                    },
                    hidden: false,
                },
                {
                    formName: '邀请码：',
                    key: 'invent',
                    template: 'input',
                },
            ],
            onFinish: async (value) => {
                console.log(value);
                // const res = await orderProcess(value);
                // console.log(res);
            },
        },
    ];
    // const newList = [
    //     {
    //         ...
    //     }
    //     ...list
    // ]
    const a = [
        {
            formName: '登陆名称：',
            key: 'name',
        },
        {
            formName: '所属国家：',
            key: 'country',
        },
        {
            formName: '邀请码：',
            key: 'invent',
        },
    ];
    return (
        <div className="bg-white p-2.5">
            <Row gutter={16} style={{ marginBottom: '20px' }}>
                {list.map((item, index) => {
                    return (
                        <Col span={12} key={index}>
                            <Card title={item.title} bordered={false}>
                                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" onFinish={item.onFinish}>
                                    {item.formList.map((formItem, index) => {
                                        return (
                                            !formItem.hidden &&
                                                <Form.Item label={formItem.formName} key={index} name={formItem.key}>
                                                    {formItem.template === 'input' && <Input />}
                                                    {formItem.template === 'select' &&
                                                        <Select options={formItem.options} onChange={formItem.handleChange} />
                                                    }
                                                </Form.Item>

                                        );
                                    })}
                                    <Form.Item {...formTailLayout}>
                                        <Button type="primary" style={{ width: '100%' }} htmlType="submit">
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                    );
                })}
            </Row>
        </div>
    );
};

export default CustomerApi;

const Demo = () => {
    const [form] = Form.useForm();

    const age = Form.useWatch('age', { form, preserve: true });
    console.log(age);

    const nameDom = age > 30 &&
        <Form form={form}>
            <Form.Item name="name">
                <Input />
            </Form.Item>
        </Form>
    ;
    return (
        <div>
            <Button onClick={() => form.setFieldValue('age', 2)}>Update</Button>
            {nameDom}
        </div>
    );
};
